<template>
    <div>
        <a-row :gutter="24">
            <a-col :span="12">
                <a-card :bordered="false">
                    <div style="height: 4.8rem">
                        <div>
                            <h2 style="display:inline-block"> 医师执业资格证</h2>
                            <a-input-search v-model="userName"  @search="searchUserName"  placeholder="医师姓名"   style="width: 200px;display: inline;float: right"/>
                        </div>
                        <div class="thumb-example">
                            <div class="swiper-zoom-container" v-if="checkPreImg" style="height: 3rem;width: 6rem;margin:0px auto;">
                                <span v-if="checkPreImg === null " style="font-size: 12px;font-style: italic;border:1px red solid">无图片</span>
                                <img class="j-editable-image" :src="getImgView(checkPreImg.url)" alt="无图片" width="100%" height="100%"  >
                            </div>
                            <div class="swiper-zoom-container" v-if="!checkPreImg" style="height: 3rem;width: 6rem;margin:0px auto;">
                                <span  style="font-size: 12px;font-style: italic;color: white">无图片</span>
                            </div>
                            <!-- swiper2 Thumbs -->

                            <swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs" >
                                <swiper-slide v-for="(item,index) in preImgList" :key="index">
                                    <div class="swiper-zoom-container" @click="() => clickPreImg(index)">
                                        <div class="img-wrap">
                                            <img class="j-editable-image" :src="getImgView(item.url)" alt="无图片" width="100%" height="100%"  >
                                        </div>
                                    </div>
                                </swiper-slide>
                                <!--<div class="swiper-button-next" slot="button-next" ></div>-->
                                <!--<div class="swiper-button-prev" slot="button-prev" ></div>-->
                            </swiper>


                        </div>
                    </div>
                </a-card>
            </a-col>
            <a-col :span="12">
                <a-card :bordered="false">
                    <div style="height: 4.8rem">
                        <h2 v-if="customerName">【{{customerName}}】医院信息</h2>
                        <h2 v-else> 医院信息</h2>
                        <div>
                            <a-radio-group  default-value="0" @change="onChange"  style="margin-bottom: 30px">
                                <a-radio-button value="0" style="margin-right: 10px">
                                    营业执照
                                </a-radio-button>
                                <a-radio-button value="1">
                                    卫生许可证
                                </a-radio-button>
                            </a-radio-group>
                            <div style=" text-align:center; margin:0 auto;">
                                <img style="width:5rem; height:3.5rem; background-color:#CCC; border:#000 1px solid;"
                                     class="j-editable-image" :src=" checkedNum == '1' ? getImgView(licenceImg) : getImgView(businessLicenseImg)" alt="无图片"/>
                                <h5 style="color: white"> 编号：{{ number || '--'}}</h5>
                            </div>
                        </div>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>

<script>
    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'
    import { getAction } from '@/api/manage'
    export default {
        name: 'CustomerInfoImg',
        mixins: [JeecgListMixin, mixinDevice],
        props: {
            // 父组件传递过来的值
            editData: {
                type: Object,
                default: ''
            },

        },
        data() {
            return {
                preImgList:[],//图片地址
                checkPreImg : null,// 选中的图片
                checkedNum : null, // 选中要查看的证书
                userName:'',// 输入的医师姓名参数
                swiperOptionTop: {
                    loop: true,
                    loopedSlides: 8, // looped slides should be the same
                    spaceBetween: 10,
                    // navigation: {
                    //     nextEl: '.swiper-button-next',
                    //     prevEl: '.swiper-button-prev'
                    // },
                    // observer: true,
                    // observeParents: true,
                    // grabCursor: true // 抓手
                },
                swiperOptionThumbs: {
                    loop: true,
                    loopedSlides: 8, // looped slides should be the same
                    spaceBetween: 10,
                    centeredSlides: true,
                    slidesPerView: 'auto',
                    touchRatio: 0.2,
                    slideToClickedSlide: true,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                },
                customerNumber:null,
                // 演示解决小董本地服务器图片显示不出来的问题 （发布请删除）
                businessLicenseImg: null,
                licenceImg: null,
                number: null,

            }
        },
        mounted() {
            //参数赋值
            this.getDataSource()
        },
        watch: {
            // 如果 `customerNumber` 发生改变，这个函数就会运行
            editData: function(newValue, oldValue) {
                this.getDataSource()
            },
        },
        methods: {
            // 选中事件
            async onChange(e) {
                this.checkedNum = e.target.value
                if(this.checkedNum == 0){
                    this.number = this.editData.businessLicenseNumber
                }else if(this.checkedNum == 1){
                    this.number = this.editData.licenceNumber
                }
            },
            // 获取医院信息图片
            async getDataSource(){
                // 演示解决小董本地服务器图片显示不出来的问题 （发布请删除）
                this.businessLicenseImg = `https://www.gzhc.vip/recycle/${this.editData.businessLicense}`
                this.licenceImg = `https://www.gzhc.vip/recycle/${this.editData.licence}`
                this.customerNumber = this.editData.customerNumber
                let params = {
                    customerNumber : this.customerNumber,
                    userName : this.userName
                }
                this.checkPreImg = null;
                let imgList = [];
                let res = await getAction('/hc/hcMedicalCare/queryPageList',params)
                if (res && res.success) {
                    let data = res.result || [];
                    data.forEach((item, index) => {
                        let obj = {
                            index,
                            url : `https://www.gzhc.vip/recycle/${item['practisingCertificate']}`,
                        };
                        if(index === 0){
                            this.checkPreImg = obj;
                        }
                        imgList.push(obj)
                    })
                }
                this.preImgList = imgList;
                console.log('preImgList',this.preImgList);
            },

            // 根据医生姓名来查
            searchUserName(){
                this.getDataSource();
            },
            clickPreImg(index){
                this.checkPreImg = this.preImgList[index];
            },
        },
    }
</script>

<style lang="scss" scoped>
    .ant-radio-button-wrapper-checked{
        background-color: #F2AF06 !important;
    }
    .swiper {
        .swiper-slide {
            background-position: center;
        }
        &.gallery-top {
            height: 1.2rem;
            width: 60%;
            margin-bottom: 10px;
        }
        &.gallery-thumbs {
            height: 1rem;
            box-sizing: border-box;
            margin-top: 10px;
        }
        &.gallery-thumbs .swiper-slide {
            height: 1.2rem;
            width: 2rem;
            opacity: 0.4;
        }
        &.gallery-thumbs .swiper-slide-active {
            opacity: 1;
        }
        .swiper-zoom-container .img-wrap>img {
            width:150px; height:100px
        }
    }

</style>
